import React from 'react';
import {
    StyleSheet, Text,
    TouchableOpacity,View
} from 'react-native';
import {colors} from "../../utils/config";

export default function StatisticsItem(props) {

    if( (props.showType == 2 && props.recorded) || props.showType == 1){
        return (
            <TouchableOpacity
                style={[styles.itemView,{borderTopLeftRadius: props.index === 0 || (props.showType == 2 && props?.statistics.length && !props.statistics[0].recorded && props.index === 1) ? 16 : 0,     borderTopRightRadius: props.index === 0 || (props.showType == 2 && props?.statistics.length && !props.statistics[0].recorded && props.index === 1) ? 16 : 0 , borderBottomLeftRadius: props.index+1 == props.statistics.length ? 16 : 0, borderBottomRightRadius: props.index+1 == props.statistics.length ? 16 : 0 } ]}
                onPress={props?.itemCallback}
            >
                <View style={styles.itemTopView}>
                    <Text style={styles.itemTitle}>{props?.name}</Text>
                    <Text style={styles.itemValue}>{props?.time}h</Text>
                </View>
                <View style={styles.itemBottomView}>
                    <View style={styles.progressView}>
                        <View style={[styles.progressValueView,{width: `${(( props.showType == 2 ? props?.percent : props?.percentBaseTotalTime )||0)*100}%`,backgroundColor: colors[props.index % 10]}]}></View>
                    </View>
                    <Text style={styles.itemPercent}>{parseInt(String((( props.showType == 2 ? props?.percent : props?.percentBaseTotalTime ) || 0) * 100))}%</Text>
                </View>
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    itemView: {
        backgroundColor: '#fff',
    },
    itemTopView: {
        marginHorizontal: 16,
        marginTop: 16,
        flexDirection: 'row',
        justifyContent: 'space-between',
    },
    itemTitle: {
        color: 'rgba(65, 79, 102, 1)',
        fontSize: 14,
        fontWeight: 'bold',
    },
    itemValue: {
        color: 'rgba(65, 79, 102, 1)',
        fontSize: 16,
        fontWeight: 'bold',
    },
    itemBottomView: {
        marginBottom: 16,
        marginHorizontal: 16,
        flexDirection: 'row',
        justifyContent: 'space-between',
        alignItems: 'center',
        marginTop: 10,
    },
    progressView: {
        backgroundColor: 'rgba(229, 229, 234, 1)',
        height: 6,
        borderRadius: 3,
        flex: 1,
    },
    progressValueView: {
        height: 6,
        borderRadius: 3,
    },
    itemPercent: {
        color: 'rgba(142, 142, 147, 1)',
        fontSize: 14,
        marginLeft: 10,
    }
});
